<template>
  <div role="tabpanel" class="tab-panel active" id="Message">
    <ul class="list-group">
      <li class="list-group-item" v-for="a in messages" :key="a.id">
        <!-- query传参 -->
        <!-- <router-link :to="`/home/message/messagedetail?id=${a.id}&content=${a.content}`"> -->
        <!-- params传参 -->
        <!-- <router-link :to="`/home/message/messagedetail/id=${a.id}/content=${a.content}`">   -->
        <!-- query和params字符串结合写法 -->
        <!-- <router-link :to="`/home/message/messagedetail/id=${a.id}/?content=${a.content}`"> -->
        <router-link :to="{name:'messagedetail',params:{id:a.id},query:{content:a.content}}">
          {{ a.content }}
        </router-link>
      </li>
    </ul>
    <div class="alert alert-success" role="alert">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue"
export default defineComponent({
  name: 'Message',
})
</script>

<script lang="ts" setup>
const messages = ref([
  { id: 1, content: '分伦喜欢学习' },
  { id: 2, content: '小龙喜欢背锅' },
  { id: 3, content: '张雷喜欢小红帽' },
])
</script>

<style scoped></style>